import React, { useEffect, useState } from "react";
import testUrl from "@/assets/images/test-avatar.png";
import { getFaceAvatarByPosition } from "@/utils/faceAvatar";
import "./index.scss";

interface Item {
  avatarInfo: {
    width: number;
    height: number;
    src: string;
    posX: number;
    posY: number;
  };
}

/**
 * 获取一张图片中的头像
 */
const FaceAvatar: React.FC = () => {
  const [itemList, setItemList] = useState<Item[]>([]);

  const originSrc = testUrl;
  // const imageInfo = { width: 824, height: 1193 };
  const item = {
    width: 0.6,
    height: 0.6,
    x: 0.2,
    y: 0.1
  };

  const getFaceAvatarList = async () => {
    // const newList = await getFaceAvatar({ originSrc, imageInfo, itemList: [item] });
    const newList = await getFaceAvatarByPosition({ originSrc, itemList: [item] });
    console.log({ newList });
    setItemList(newList);
  };

  useEffect(() => {
    getFaceAvatarList();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <section className="faceAvatar">
      {/* {itemList.map(item => (
        <img key={item.avatarSrc} className="avatar" alt="头像" src={item.avatarSrc} />
      ))} */}
      {itemList.map(item => (
        <div key={item.avatarInfo.src} className="avatarContainer">
          <div
            className="avatar"
            style={{
              width: item?.avatarInfo?.width,
              height: item?.avatarInfo?.height,
              backgroundImage: `url(${item?.avatarInfo?.src})`,
              backgroundPosition: `-${item?.avatarInfo?.posX}px -${item?.avatarInfo?.posY}px`
            }}
          />
        </div>
      ))}
    </section>
  );
};

export default FaceAvatar;
